import React, { useState } from "react";
import { Link, Outlet, useNavigate } from "react-router-dom";

export default function Message() {
  // 编程式路由
  const navigate = useNavigate();

  const [msgs] = useState([
    { id: 1, title: "message1", content: "content1" },
    { id: 2, title: "message2", content: "content2" },
    { id: 3, title: "message3", content: "content3" },
  ]);

  const showDetail = ({ id, title, content }) => {
    navigate("detail", {
      replace: false,
      state: {
        id,
        title,
        content
      },
    });
  };
  return (
    <div>
      <ul>
        {msgs.map((item) => {
          return (
            <li key={item.id}>
              {/* params传参 <Link to={`detail/${item.id}/${item.title}/${item.content}`}>{item.title}</Link> */}
              {/* search参数 <Link to={`detail?id=${item.id}&title=${item.title}&content=${item.content}`}>{item.title}</Link> */}
              <Link
                to="detail"
                state={{
                  id: item.id,
                  title: item.title,
                  content: item.content,
                }}
              >
                {item.title}
              </Link>
              <button onClick={() => showDetail(item)}>查看详情</button>
            </li>
          );
        })}
      </ul>

      {/* 指定路由组件的展示位置 */}
      <Outlet />
    </div>
  );
}
